<template>
	<view>
		<view class="push" @click.stop>
			<view class="info u-flex" v-if="!hideInfo">
				<image :src="info.cover"></image>
				<view class="u-flex-1">
					<view class="title u-line-2">{{info.goodsName}}</view>
					<view class="sku"></view>
					<view class="price">{{info.price}} i币</view>
				</view>
			</view>
			<view class="price-count" v-if="!hideInfo">
				<view class="num1">{{info.price}} i币</view>
				<view class="num2">余额：{{vuex_user.icoin}} i币</view>
			</view>
			
			<view class="ds-price">
				<view class="title" v-if="!hideInfo">
					<u-icon name="info-circle"></u-icon>
					<text>余额不足，还需充值{{diff}} i币</text>
				</view>
				<view v-else style="height: 80rpx;"></view>
				
				<scroll-view scroll-y="true" style="height: 240rpx;">
					<view class="list u-flex u-flex-wrap">
						<view class="item " v-for="(item,index) in rechargeList" :key="item.id" :class="{active:index == dsIndex}" @click="dsIndex = index">
							<text class="num1">{{item.icoin}}</text><text class="num2">i币</text>
						</view>
					</view>
				</scroll-view>
				<view class="price" v-if="dsIndex >= 0">￥{{rechargeList[dsIndex].money}}</view>
			</view>
			
			<view class="btn-wrap u-flex">
				<view @click="pay">立即充值</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"rechargeib",
		data() {
			return {
				dsIndex: 0,
				rechargeList:[]
			};
		},
		props:{
			info:{
				type:Object,
				default(){
					return {}
				}
			},
			hideInfo:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			getRecharge(){
				this.$u.api.recharge().then(res=>{
					this.rechargeList = res
				})
			},
			pay(){
				if(this.dsIndex == -1){
					this.$u.toast('请选择充值面额')
					return
				}
				const recharge_id = this.rechargeList[this.dsIndex].id
				this.$u.api.rechargePay({recharge_id}).then(res=>{
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp:res.timestamp,
						nonceStr:res.noncestr,
						signType:res.signtype,
						paySign:res.paysign,
						appid:res.appid,
						package:res.package,
						success:()=> {
							// 支付成功=>微信更新用户信息
							this.$store.dispatch('userInfo',this)
							this.$emit('pay')
						},
						fail:err=>{
							this.$u.toast('支付失败')
						}
					})
				})
			}
		},
		created() {
			this.getRecharge()
		},
		computed:{
			diff(){
				const price = Number(this.info.price)
				const icoin = Number(this.vuex_user.icoin)
				return this.$app.math.sub(price,icoin)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.push{
		width: 640rpx;border-radius: 20rpx;transform: translate(-50%,-50%);left: 50%;top: 50%;position: fixed;background-color: #fff;
		.info{
			padding: 30rpx;border-bottom: 1rpx solid #eee;
			image{width: 160rpx;height: 160rpx;border-radius: 20rpx;display: block;flex-shrink: 0;margin-right: 22rpx;}
			.title{font-weight: bold;font-size: 29rpx;line-height: 40rpx;height: 80rpx;}
			.sku{font-size: 26rpx;color: #555;padding-bottom: 10rpx;}
			.price{font-size: 24rpx;font-weight: bold;}
		}
		.price-count{
			text-align: right;padding: 30rpx 30rpx;
			.num1{font-size: 30rpx;font-weight: bold;line-height: 50rpx;}
			.num2{line-height: 50rpx;}
		}
		// 打赏金额
		.ds-price{
			padding: 0 30rpx;
			.title{color: #F55332;padding-bottom: 20rpx;text-align: center;}
			.list{
				.item{width: 31.33%;margin: 0 1%;text-align: center;line-height: 100rpx;border-radius: 10rpx;border: 2rpx solid #fff;height: 100rpx;
					transition: all .2s;
					.num1{font-size: 34rpx;}
					.num2{padding-left: 20rpx;font-weight: bold;}
					&.active{
						border-color: $tc;background-color: rgba($color: $tc, $alpha: 0.05);
						.num1{font-size: 40rpx;color: #F55332;}
						.num2{color: $tc;}
					}
				}
			}
			.price{text-align: center;color: #f00;}
		}
		
		.btn-wrap{justify-content: center;padding: 30rpx 0 50rpx;
			view{
				background: linear-gradient(90deg, #FAE273 0%, #F4D039 100%);color: #fff;font-size: 32rpx;
				font-weight: bold;width: 550rpx;line-height: 66rpx;text-align: center;border-radius: 100rpx;}
		}
	}
</style>
